import { useCallback, useContext } from "react";
import "./ContactItem.css";
import { ContactContext } from "./context";

const ContactItem = function (props) {
    const { name, email, isNew, index } = props;
    const { setState } = useContext(ContactContext);

    const handleItemClick = useCallback(() => {
        setState({
            page: "ContactDetail",
            currentItemIndex: index
        })
    }, [setState, index]);

    return <div className="contact-item" onClick={handleItemClick}>
        <div className="user-info">
            <div className="name-line">
                <div className="name">{name}</div>
                {isNew && <div className="is-new">New</div>}
            </div>
            <div className="email">{email}</div>
        </div>
        <div className="action">
            <img className="img3" src="/imgs/3.png" alt="4" />
            <img className="img4" src="/imgs/4.png" alt="4" />
        </div>
    </div>;
}

export default ContactItem;